<template>
	<view class="person-home">
		<view>
			<u-navbar title="资料设置" 
					 title-color="#000000" title-bold
					:background="{ background: '#f0f0f0'  }" :border-bottom="false">
			</u-navbar>
		</view>
		<view class="moreInfo-box">
			<u-cell-group>
				<u-cell-item    title="设置备注和标签"  :title-style="titleStyle" 
							 hover-class="none">
				</u-cell-item>
				<u-cell-item    title="朋友权限"  :title-style="titleStyle" 
							 hover-class="none">
				</u-cell-item>
			</u-cell-group>
			<u-gap height="20" bg-color="#eee" margin-top="0" margin-bottom="0"></u-gap>
			<u-cell-group>
				<u-cell-item title="把他推荐给朋友" :title-style="titleStyle"  hover-class="none">
				</u-cell-item>
				<u-cell-item title="添加到桌面" :title-style="titleStyle"  hover-class="none">
				</u-cell-item>
			</u-cell-group>
			
			<u-gap height="20" bg-color="#eee" margin-top="0" margin-bottom="0"></u-gap>
			<u-cell-group>
				<u-cell-item title="设为星标朋友" :title-style="titleStyle" :arrow="false" hover-class="none">
					<view slot="right-icon">
						<u-switch v-model="starFlag" active-color="#19b36b" inactive-color="#eee"></u-switch>
					</view>
				</u-cell-item>
			</u-cell-group>
			
			<u-gap height="20" bg-color="#eee" margin-top="0" margin-bottom="0"></u-gap>
			<u-cell-group>
				<u-cell-item title="加入黑名单" :title-style="titleStyle" :arrow="false" hover-class="none">
					<view slot="right-icon">
						<u-switch v-model="blackFlag" active-color="#19b36b" @change="blackFlagChange"  inactive-color="#eee"></u-switch>
					</view>
				</u-cell-item>
				<u-cell-item title="投诉" :title-style="titleStyle"   hover-class="none">
				</u-cell-item>
			</u-cell-group>
			<u-gap height="20" bg-color="#eee" margin-top="0" margin-bottom="0"></u-gap>
			<view  @click="deleteFriend()" style="text-align: center;padding: 20rpx;font-size: 35rpx;background-color: #ffffff;">
				<text style="color: red;">删除联系人</text>
			</view>
		</view>
		
	<!-- 	<u-modal v-model="delModelShow" :content="delContent" title="删除联系人" width="80%"
				show-cancel-button  confirm-text="删除" confirm-color="#fa3534" @cancel="cancelDel"
				show-confirm-button cancel-text="取消"	cancel-color="#000000" @confirm="confirmDel"
				></u-modal> -->
		<u-action-sheet :list="delContentList" v-model="delModelShow" safe-area-inset-bottom
						:border-radius="20" :cancel-btn="true" @click="delActionConfirm"></u-action-sheet>
		
		
		<u-popup v-model="loadingShow"
				:mask-close-able="false" :mask="false"
				mode="center" border-radius="20" width="250rpx" height="250rpx">
				<view class="u-flex u-row-center u-col-center" 
				  style="flex-direction: column; text-align: center;
						background-color: #000000;color: #ffffff;height: 250rpx;width: 250rpx;">
					<view>
						<view>
							<u-loading mode="circle" :size="80" color="#909399"></u-loading>
						</view>
						<view class="u-m-t-20 u-font-32" style="font-weight: 420rpx;">正在加载</view>
					</view>
				</view>
		</u-popup>
		
						
		<u-action-sheet :list="blackListContentList" v-model="blackModelShow" safe-area-inset-bottom
						:border-radius="20" :cancel-btn="true" @close="cancelBlack"></u-action-sheet>				
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					marginLeft: '10rpx',
					color: '#000000',
					fontSize: "34rpx",
				},
				valueStyle:{
					fontSize: "32rpx",
				},
				friendInfo:null,
				starFlag:false,
				blackFlag:false,
				delModelShow:false,
				delContent:'',
				delContentList:[
					{
						text: '将联系人删除,同时删除与该联系人的聊天记录',
						color: '#909399',
						fontSize: 28,
					},
					{
						text: '删除联系人',
						color: '#000000',
						fontSize: 34,
					},
					{
						text: '删除联系人并投诉',
						color: '#000000',
						fontSize: 34,
					}
				],
				loadingShow:false,
				blackModelShow:false,
				blackListContentList:[
					{
						text: '将联系人删除,同时删除与该联系人的聊天记录',
						color: '#909399',
						fontSize: 26,
					},
					{
						text: '确定',
						color: '#fa3534',
						fontSize: 34,
					}
				],
			};
		},
		onLoad:function(option){
			let param=option.friendInfo;
			if(param!=null&&param!=undefined){
				let friendInfoStr= decodeURIComponent(param);
				this.friendInfo=JSON.parse(friendInfoStr);
				console.log("freindInfo",this.friendInfo);
			}
		},
		methods:{
			deleteFriend:function(){
				let that=this;
				let friendName=that.friendInfo.friendName;
				this.delContentList[0].text=`将联系人"`+friendName+`"删除,同时删除与该联系人的聊天记录`;
				this.delModelShow=true;	
			},
			delActionConfirm:function(index){
				let that=this;
				console.log("index====",index);
				that.loadingShow=true;
				that.confirmDel();
			},
			blackFlagChange:function(){
				let that=this;
				if(this.blackFlag){
					let friendName=that.friendInfo.friendName;
					this.blackListContentList[0].text=`加入黑名单,你将不再收到对方的消息,并且你们互相看不到对方朋友圈的更新`;
					this.blackModelShow=true;	
				}
			},
			cancelBlack:function(){
				this.blackFlag=false;
			},
			
			confirmDel:function(){
				let that=this;
				that.$u.api.imUser.deleteFriend(that.friendInfo).then(res => {
					if(res.code==200){
						that.loadingShow=true;
						uni.reLaunch({
							url: "/pages/tabbar/contact/contact-list",
							complete:function(){
								uni.showToast({
									title:'已删除联系人',
									icon:'success',
									duration:1000,
								})
							}
						})
					}
				}).catch(res => {
					this.globalUtil.utilAlert("后台请求失败,请联系管理员!");
				})   
			},
			cancelDel:function(){
				this.delModelShow=false;	
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f1f1f1;
}
.person-home {
	.u-action-sheet-item{
		padding-left: 34rpx !important;
		padding-right: 34rpx !important;
		text-align: center !important;
	}
}
</style>
